<template>

  <div class="animate__animated animate__fadeIn">
    <a-row type="flex" :gutter="24">
      <!-- Billing Information Column -->
      <a-col :span="24" :md="24" class="mb-24">

        <!-- Billing Information Card -->
        <CardApply></CardApply>
        <!-- / Billing Information Card -->

      </a-col>
    </a-row>

    <a-row type="flex" :gutter="24">
      <a-col :span="24" :md="24" class="mb-24">
        <a-card :bordered="false" class="header-solid h-full" :bodyStyle="{padding: 0,}"  >
          <template #title>
            <a-row type="flex" align="middle" >
              <a-col :span="24" :md="12">
                <h5 class="font-semibold m-0">用户信息列表</h5>
              </a-col>

            </a-row>

          </template>


          <a-table :columns="tableColumns" :data-source="userData" :pagination="true" >

            <template slot="user" slot-scope="user">
              <div class="table-avatar-info">
                <a-avatar shape="square" :src="user.avatar" />
                <div class="avatar-info">
                  <h6>{{ user.name }}</h6>
                  <p>{{ user.email }}</p>
                </div>
              </div>
            </template>

            <template slot="role" slot-scope="data">
              <a-select v-model="data.name" style="width: 120px">
                <a-select-option value="Admin">
                  管理员
                </a-select-option>
                <a-select-option value="Review">
                  审核员
                </a-select-option>
                <a-select-option value="NormalUser">
                  普通用户
                </a-select-option>
              </a-select>
            </template>



          </a-table>
        </a-card>

      </a-col>
      <!-- Billing Information Column -->
    </a-row>

  </div>
</template>

<script>
import CardApply from "@/components/Cards/CardApply";
import CardUserTable from "@/components/Cards/CardUserTable";

export default {
  components:{
    CardApply,
    CardUserTable
  },
  data(){
    return{
      tableColumns : [
        {
          title: '用户ID',
          dataIndex: 'key',
          scopedSlots: { customRender: 'key' },
          width: 300,
        },
        {
          title: '用户基本资料',
          dataIndex: 'user',
          scopedSlots: { customRender: 'user' },
          width: 300,
        },

        {
          title: '真实姓名',
          dataIndex: 'realName',
          scopedSlots: {customRender: 'realName'}
        },
        {
          title: '联系方式',
          dataIndex: 'contact',
          scopedSlots: {customRender: 'contact'}
        },
        {
          title: '用户权限组',
          dataIndex: 'role',
          scopedSlots: {customRender: 'role'}
        }

      ],
      userData:[],
      tableData : [
        {
          key: '1',
          user: {
            userId: 'U27492922',
            name: 'WeiHao.L',
            avatar: 'images/face-6.jpeg',
            email: '2569982966@qq.com'
          },
          realName: "李维昊",
          contact: '18813003941',
          role:{
            name: 'Admin'
          }
        },

        {
          key: '2',
          user: {
            userId: 'U23432234',
            name: 'xixii',
            avatar: 'images/face-3.jpg',
            email: '55121@qq.com'
          },
          realName: "",
          contact: '18813003941',
          role:{
            name: 'NormalUser'
          }
        },
        {
          key: '2',
          user: {
            userId: 'U27452922',
            name: 'Sky',
            avatar: 'images/face-2.jpg',
            email: '251@qq.com'
          },
          realName: "",
          contact: '18813003594',
          role:{
            name: 'NormalUser'
          }
        },
        {
          key: '2',
          user: {
            userId: 'U22321232',
            name: '昏睡彪彪',
            avatar: 'images/face-13.jpg',
            email: '251@qq.com'
          },
          realName: "",
          contact: '18822222222',
          role:{
            name: 'NormalUser'
          }
        },
        {
          key: '2',
          user: {
            userId: 'U22323232',
            name: 'Sky',
            avatar: 'images/face-2.jpg',
            email: '251@qq.com'
          },
          realName: "",
          contact: '18811111111',
          role:{
            name: 'NormalUser'
          }
        }

      ],
      options: [{
        value: 'Admin',
        label: '管理员'
      }, {
        value: 'Review',
        label: '审核员'
      }, {
        value: 'NormalUser',
        label: '普通用户'
      }],
    }
  },
  name: "UserManage",
  methods:{

    getUser(){
      this.$axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          "Authorization": sessionStorage.getItem("systemToken")
        },
        url: "/api/user/getAllUserInfoList", //后端请求的路径
        method: "get",
      }).then((response) => {
        console.log(response.data)
        if (response.data.status === 0) {
          this.userData = response.data.data
        }

      });

    },
    getUserInfo(){
      var userId = sessionStorage.getItem("userId")

      if (userId !== null && userId !== undefined && userId !== ''){
        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
            "Authorization": sessionStorage.getItem("systemToken")
          },
          url: "/api/user/getUserInfoByUserId", //后端请求的路径
          method: "post",
          params: {
            userId: sessionStorage.getItem("userId"),
          },
        }).then((response) => {
          console.log(response.data)
          if (response.data.data.user.role == "Admin"){

          }else {
            swal("非法请求","","warning")
                .then((e) => {
                  this.backHistory();
                })
          }
        });
      }else {
        swal("请先登录","","warning")
            .then((e) => {
              this.backHistory();
            })
      }


    },
    backHistory(){
      this.$router.go(-1);
    },
    debug(e){
      console.log(this.tableData)
      console.log(index)
      for(var i=0; i<this.tableData.length; i++){
        this.tableData[i].role = e
      }
    }
  },
  mounted() {
    this.getUserInfo()
    this.getUser()
  }
}
</script>

<style lang="scss">

</style>